﻿@namespace BootstrapBlazor.Components

<div class="modal fade draggable " id="@ClientId" data-bs-backdrop="@(IsBackdropStatic ? "static" : "true")" data-bs-keyboard="@(IsKeyboard ? "true" : "false")" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog @DialogClassName modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@Title</h4>
                <button type="button" class="close" aria-label="Close" @onclick="Hide">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if (Visible)
                {
                    @ChildContent
                }
            </div>
            @if (OnYes.HasDelegate)
            {
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @onclick="Hide">@CloseButton</button>
                    <button type="button" class="btn btn-primary" @onclick="YesClick">@YesButton</button>
                </div>
            }
        </div>
    </div>
</div>

@code {

    [Parameter] public string ClientId { get; set; } = $"modal-{Guid.NewGuid().ToString("n")}";
    [Parameter] public bool IsBackdropStatic { get; set; } = true;
    [Parameter] public bool IsKeyboard { get; set; } = true;

    async Task Show() => await JS.InvokeVoidAsync("adminBlazorJS.modalShow", $"{ClientId}", DotNetObjectReference.Create(this));
    [JSInvokable]
    async public Task ModalOnClose()
    {
        if (OnClose.HasDelegate) await OnClose.InvokeAsync();
    }
    async Task Hide()
    {
        await JS.InvokeVoidAsync("eval", $"$('#{ClientId}').modal('hide')");
        if (OnClose.HasDelegate) await OnClose.InvokeAsync();
    }
    async Task Draggable() => await JS.InvokeVoidAsync("eval", $"$('#{ClientId}').draggable({{cursor:'move',handle:'.modal-header'}});$('#{ClientId}.modal.draggable>.modal-dialog>.modal-content>.modal-header').css('cursor','move');");
    //async Task bootstrapSwitch() => await JS.InvokeVoidAsync("eval", $"$('#{ClientId} input[data-bootstrap-switch]').each(function(){{$(this).bootstrapSwitch('state',$(this).prop('checked'));}})");

    async protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        if (DialogClassName.IsNull() || !DialogClassName.Contains("modal-fullscreen") && !DialogClassName.Contains("modal-xxl"))
            await Draggable();
        //await bootstrapSwitch();
    }

    [Parameter] public string Title { get; set; } = "标题";
    [Parameter] public string YesButton { get; set; } = "保存";
    [Parameter] public string CloseButton { get; set; } = "取消";
    [Parameter] public string DialogClassName { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }

    bool _visible;
    [Parameter] public bool Visible
    {
        get => _visible;
        set
        {
            if (_visible != value)
            {
                if (value) this.InvokeAsync(Show);
                else this.InvokeAsync(Hide);
            }
            _visible = value;
        }
    }

    [Parameter] public EventCallback OnYes { get; set; }
    [Parameter] public EventCallback OnClose { get; set; }

    async Task YesClick()
    {
        if (OnYes.HasDelegate) await OnYes.InvokeAsync();
    }
}